<template>
  <el-dialog
    title="添加标签"
    :visible.sync="dialogValue"
    width="739px"
  >
    <TitleBox title="选择标签：" />
    <div class="tag-box">
      <div class="tag-list f-r a-c f-w">
        <div
          v-for="item in tagList1"
          :key="item.id"
          :class="['tag f-s', item.checked ? 'active' : '']"
          @click="onTag1(item)"
        >{{ item.name }}</div>
      </div>
    </div>
    <div class="line" />
    <TitleBox title="已选择标签：" />
    <div class="tag-box">
      <div class="tag-list f-r a-c f-w">
        <div
          v-for="(item,index) in tagList2"
          :key="item.id"
          :class="['tag', item.checked ? 'active' : '']"
        >
          {{ item.name }}
          <span class="close-icon" @click.stop="closeTag(item,index)">
            <i class="el-icon-close" />
          </span>
        </div>
      </div>
    </div>
    <div slot="footer" class="f-r j-e">
      <el-button @click="dialogValue = false">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { http_project2, } from '@/api'

export default {
  name: 'ProjectTag',
  data() {
    return {
      dialogValue: false,
      tagList1: [
      ],
      projectId: ''
    }
  },
  computed: {
    tagList2() {
      return this.tagList1.filter(el => el.checked)
    }
  },
  methods: {
    open(item) {
      this.projectId = item.id
      http_project2.tagList().then(res => {
        this.tagList1 = res.data.map(el => {
          return {
            id: el.id,
            name: el.label,
            checked: false
          }
        })
        http_project2.relTagList({ id: item.id }).then(res2 => {
          this.tagList1.forEach(el => {
            if (res2.data.find(el2 => el2.lableId == el.id)) {
              el.checked = true
            } else {
              el.checked = false
            }
          })
        })
      })
      this.dialogValue = true
    },
    onTag1(item) {
      http_project2.createTag({
        projectId: this.projectId,
        lableId: item.id
      }).then(res => {
        this.$message.success(res.msg)
        item.checked = true
      })
    },
    closeTag(item) {
      this.tagList1.forEach(el => {
        if (el.id == item.id) {
          http_project2.deleteTag({
            projectId: this.projectId,
            lableId: item.id
          }).then(res => {
            this.$message.success(res.msg)
            el.checked = false
          })
        }
      })
    },
    onSave() {
      this.dialogValue = false
    }
  }
}
</script>
<style lang="scss">
.tag-box{
  .line {
    border-bottom: 1px solid #CECECE;
  }
  margin: 30px 0 68px 0;
  .tag-list {
    .tag {
      margin-bottom: 10px;
      padding: 0 28px;
      height: 38px;
      opacity: 1;
      border: 1px solid #999999;
      line-height: 38px;
      text-align: center;
      font-size: 16px;
      color: #999999;
      margin-right: 30px;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
    }
    .tag.active {
      background-color: #DEE8FF;
      color: #4880FF;
      border-color: #4880FF;
    }
    .close-icon {
      color: red;
      position: absolute;
      top: -8px;
      right: -8px;
      background-color: red;
      display: inline-block;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      i {
        font-size: 14px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        color: #ffffff;
        line-height: 18px;
      }
    }
  }
}
</style>
